{% extends 'layouts/base-fullscreen.html' %}

{% block title %} 登录 {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}
{% endblock stylesheets %}

{% block content %}

    <!-- Page content -->
    <div class="container" style="margin-top: -8rem!important;padding-bottom: 3rem!important;">
        <div class="row justify-content-center">
            <div class="col-lg-5 col-md-7 mx-auto">
                <div class="card z-index-0">
                    <div class="card-header text-center pt-5">
                        <h4>{{ QEXO_NAME }}</h4>
                    </div>
                    <div class="card-body px-lg-5 py-lg-5">
                        <form method="POST" id="login-form">
                            {% csrf_token %}
                            <div class="form-group">
                                <div class="input-group input-group-alternative">
                                    <span class="input-group-text"><i
                                            class="ni ni-hat-3"></i></span>
                                    <input type="text" name="username" class="form-control"
                                           placeholder="用户名">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group input-group-alternative">
                                    <span class="input-group-text"><i
                                            class="ni ni-lock-circle-open"></i></span>
                                    <input type="password" name="password" class="form-control"
                                           placeholder="密码">
                                </div>
                            </div>
                            {% if site_token_v2 %}
                                <div class="g-recaptcha" data-sitekey="{{ site_token_v2 }}"></div>
                            {% endif %}
                        </form>
                        <div class="text-center" id="submit-button">
                            <button onclick="submit()" class="btn btn-primary my-4">登录</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if site_token_v2 %}
        <script src="https://recaptcha.google.cn/recaptcha/api.js"></script>
    {% endif %}
    {% if site_token %}
        <script src="https://recaptcha.google.cn/recaptcha/api.js?render={{ site_token }}"></script>
    {% endif %}
{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}

    <script>
        function get_direct_link() {
            let reg = new RegExp("(^|&)next=([^&]*)(&|$)");
            let r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return "/";
        }

        function submit() {
            if (!($("input[name='username']").val())) {
                notyf.error("用户名不能为空! ")
                return false;
            }
            if (!($("input[name='password']").val())) {
                notyf.error("密码不能为空! ");
                return false;
            }
            $("#submit-button").html("<button class=\"btn btn-white my-4\">······</button>");
            {% if site_token %}
                grecaptcha.ready(function () {
                grecaptcha.execute('{{ site_token }}', {action: 'submit'}).then(function (token) {
            {% endif %}
        {% if site_token_v2 %}
            let token = grecaptcha.getResponse();
            if (!token) {
                notyf.error("请完成验证! ");
                $("#submit-button").html("<button onclick=\"submit()\" class=\"btn " +
                    "btn-primary my-4\">登录</button>");
                return false;
            }
        {% endif %}
        $.ajax({
            url: '/api/auth/',
            method: 'post',
            data: {
                "username": $("input[name='username']").val(),
                "password": $("input[name='password']").val(),
                {% if site_token or site_token_v2 %}
                    "verify": token,
                {% endif %}
                {% if site_token_v2 %}
                    "type": "v2",
                {% endif %}
                {% if site_token %}
                    "type": "v3",
                {% endif %}
            },
            dataType: "json",
            success: function (res) {
                if (res.status) {
                    notyf.success(res.msg);
                    setTimeout(window.location = get_direct_link(), 1000);
                } else {
                    notyf.error(res.msg);
                    {% if site_token_v2 %}
                        grecaptcha.reset();
                    {% endif %}
                    $("#submit-button").html("<button onclick=\"submit()\" class=\"btn " +
                        "btn-primary my-4\">登录</button>");
                }
            },
            error: function (res) {
                notyf.error("网络错误！");
                $("#submit-button").html("<button onclick=\"submit()\" class=\"btn " +
                    "btn-primary my-4\">登录</button>");
            }
        })
        {% if site_token %}
            });
            });
        {% endif %}
        }

        document.onkeydown = function (e) {
            if (!e) e = window.event;
            if ((e.keyCode || e.which) == 13) {
                submit();
            }
        }
    </script>
{% endblock javascripts %}
